<template>
  <div>
    <div class="search-option-row"> 
      <el-button v-if="listQuery.is_handle==='0'" @click="markReadCurrentPage()">标记当前页为已读</el-button>
      <el-button v-if="listQuery.is_handle==='0'" @click="markReadAll()">标记所有为已读</el-button>
      <!-- <el-button  @click="getList()">刷新</el-button> -->
    </div>
    <div class="content">
      <div class="msg_container" v-if="list && list.length >0" >
        <div class="msg_item_container" v-for="(item, index) in list" :key="index" >
          <div class="msg_item_show" @click="handleViewMsg(item)">
            <div class="msg_item_avatar" > 
              <div class="avatar">
                <img class="avatar-image" :src="item.creator.user_avatar_url">
              </div>
            </div>
            <div class="msg_item_content" > 
                <div class="msg_item_title">
                  {{item.creator.username}} {{item.content}}
                </div>
              <div class="msg_item_description">
                <span v-if="item.create_date" > {{ item.create_date | timeFromNowFilter }}</span> 
                <span v-if="item.remark">{{item.remark}}</span>
              </div>
            </div>
          </div>  
          <div class="msg_item_op">
           <el-button type="text" v-if="item.is_handle==='0'" @click="markReadItem(item)">标记为已读</el-button>
          </div>
        </div>
      </div>
      <div v-else class="notice-blank textaligncenter">
        <div class="ui list">
          <div class="item">
            <i class="el-icon-bell" style="font-size:48px"></i>
          </div>
        <div class="item">
          <div class="title">没有相关消息</div>
          </div>
        </div>
      </div>
    </div>
    <div class="pagination-container">
      <el-pagination background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current_page" :page-sizes="[10,20,30, 50]"
        :page-size="listQuery.limit" layout="total, sizes, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>

import API from '@/utils/backend_api'
export default {
  name: 'notificationPane',
  components: {},
  props: {
    is_handle: {
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      total: 0,
      current_page: 1,
      list: [],
      listQuery: {
        is_handle: this.is_handle === 'all' ? '' : this.is_handle,
        page: 1,
        offset: 0,
        limit: 20,
        sort: ''
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    markReadCurrentPage() {
      const msg_group = []
      this.list.map(msg => {
        msg_group.push(msg.id)
      })
      API.notification.read_messages({
        msg_group: msg_group
      }).then(response => {
        this.getList()
      })
    },
    markReadAll() {
      API.notification.read_all_messages().then(response => {
        this.getList()
      })
    },
    handleViewMsg(data) {
      const msg_group = []
      if (data && data.id && data.url) {
        msg_group.push(data.id)
      }
      API.notification.read_messages({
        msg_group: msg_group
      }).then(response => {
        this.$router.push({ path: data.url })
        this.getList()
      })
    },
    markReadItem(data) {
      const msg_group = []
      if (data && data.id && data.url) {
        msg_group.push(data.id)
      }
      API.notification.read_messages({
        msg_group: msg_group
      }).then(response => {
        this.getList()
      })
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      if (val >= 1) {
        this.current_page = val
        this.listQuery.offset = (val - 1) * this.listQuery.limit
        this.getList()
      }
    },
    getList() {
      API.notification.message(
        this.listQuery
      ).then(response => {
        this.total = Number(response.headers['x-total-count'])
        if (response.data) {
          this.list = response.data
        } else {
          this.list = []
        }
      })
    }
  }
}
</script>
<style scoped>
.notice-blank{
  min-height: 272px;
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.textaligncenter {
    text-align: center;
    display: -webkit-flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.ui.list {
    list-style-type: none;
    margin: 1em 0em;
    padding: 0em 0em;
}
.ui.list:last-child {
    margin-bottom: 0em;
    padding-bottom: 0em;
}
.ui.list:last-child {
    margin-bottom: 0em;
    padding-bottom: 0em;
}
.ui.list>.item {
    font-size: 1em;
}
.ui.list>.item:first-child {
    padding-top: 0em;
}
ul.ui.list li, ol.ui.list li, .ui.list>.item, .ui.list .list>.item {
    display: list-item;
    table-layout: fixed;
    list-style-type: none;
    list-style-position: outside;
    padding: 0.3em 0em;
    line-height: 1.2;
}
.search-option-row{
  display: block;
  margin: 12px 0px 6px 6px;
} 

.content {
  margin: 10px 16px 20px 16px
}
.msg_item_container {
  display: flex;
  justify-content: space-between;
   border-bottom: 1px solid #e8e8e8;
}
.msg_item_container:hover{
  background-color: #e6f7ff;
}

.msg_item_show{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  align-content: flex-start;
  cursor: pointer;
  padding-top: 2px;
  padding-bottom: 4px;
  width: 75%
}
.msg_item_op{
  width: 10%
}
.msg_item_avatar{
  display: flex;
}
.avatar{
  flex: 0 0 0px;
  margin-left: 2px;
  margin-top: 2px;
}
.avatar-image {
  width: 30px;
  height: 30px;
  border-radius: 10px
}
.msg_item_title{
  font-size: 14px; 
  line-height: 22px;
  font-weight: 400;
  color: rgba(0,0,0,.65);
  /* margin-bottom: 12px; */
}
.msg_item_content{
  position: relative;
  top: 0px;
  margin-left: 10px;
  flex: 1 1 auto;
  line-height: 22px;
}
.msg_item_description{
  color:rgba(0,0,0,.45);
  font-size: 12px; 
  font-weight: 400;
  line-height: 18px;
}
</style>

